<template>
	<div class="login">
		<form class="login__wrap" action="/tiandian_man/j_spring_security_check" method="post">
			<h2>平台登录</h2>
			<div class="field username">
				<label>
					<i class="iconfont icon-xingmingyonghumingnicheng"></i>
					<input type="text" placeholder="请输入用户名" autocomplete="off" v-model="params.user_name" name="j_username"/>
				</label>
			</div>
			<div class="field password">
				<label>
					<i class="iconfont icon-mima"></i>
					<input type="password" placeholder="请输入密码" autocomplete="off" v-model="params.user_pwd" name="j_password"/>
				</label>
			</div>
			<div class="code">			
				<input type="text" autocomplete="off" placeholder="请输入验证码" class="code-ipt" v-model="params.verify_code" name="j_verifycode"/>	
				<div class="code-img">
					<img :src="code" alt="" @click="fetchCode" width="100%" height="100%"/>
				</div>
			</div>
			<div class="field">
				<input type="submit" value="登录" @click="login"/>
			</div>
		</form>
		<div class="footer">
			<div>四川天点电子商务有限公司</div>
			<div>2018-2023 All Right Reserved 川 ICP备7368127号-1</div>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.fetchCode();
		},
		data() {
			return {
				params: {
					user_name: "",
					user_pwd: "",
					verify_code: ""
				},
				code: ""
			};
		},
		methods: {
			login() {
//				this.$router.push("/admin/goods_manage");
//				var params = this.params;
//				var url = `${this.url}/user/login_login_man.action`;
//				this.$http.post(url,{ params }).then( (res) => {
//					if( res.data.success ) {
//						this.$router.push("/admin/login_succ");
//					}else {
//						this.$message({
//							type: "error",
//							message: res.data.result.errmsg
//						});
//					}
//				} );
			},
			fetchCode() {
				var random = Math.random();
				this.code = `${this.url}/common/verify_get_graph_code.action?${random}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		background-image: url('../../../static/img/login_bg.png');
		background-size: cover;
		display: flex;
		align-items: center;
	}
	.login__wrap {
		width: 350px;
		height: 480px;
		background: rgba(255,255,255,.4);
		margin-left: auto;
		margin-right: 100px;
		padding: 30px;
	}
	.login__wrap>h2 {
		font-size: 20px;
		font-weight: normal;
		color: #fefefe;
		text-align: center;
		font-family: "微软雅黑";
	}
	.field {
		margin-top: 30px;
		width: 100%;
		height: 40px;
		label {
			display: flex;
			width: 100%;
			height: 100%;
			i {
				flex: 0 0 40px;
				text-align: center;
				line-height: 40px;
			}
			input {
				border: none;
				background: inherit;
				flex: 1;
				line-height: 40px;
				font-size: 14px;
			}
		}
		input[type=submit] {
			border: none;
			width: 100%;
			padding: 13px 0;
			text-align: center;
			color: #eee;
			background: #2f343b;
			border-radius: 5px;
			font-size: 17px;
			cursor: pointer;
		}
		input[type=submit]:hover {
			background: #25343a;
		}
	}
	.field.username, .field.password {
		border-radius: 5px;
		background: rgba(222,222,222,.7);
	}
	.code {
		margin-top: 30px;
		height: 40px;
		display: flex;
		.code-ipt {
			background: rgba(222,222,222,.7);
			padding: 5px 10px;
			border-radius: 5px;
			border: none;
			height: 100%;
			width: 40%;
			margin-right: 10%;
		}
		.code-img {
			width: 50%;
			height: 100%;
			border-radius: 5px;
			background: rgba(222,222,222,.7);
		}
	}
	.remember {
		margin-top: 30px;
		input[type=checkbox] {
			vertical-align: -2px;
		}
		.remember-txt {
			color: #eee;
		}
	}
	.footer {
		position: fixed;
		width: 100%;
		bottom: 20px;
		color: #eee;
		text-align: center;
	}
</style>